 /* 论坛-四六级论坛的界面样式 */
 
 /* 整个最底背景设为灰色 */
 body {
    background-color: RGB(221, 221, 221);
}

/* 蓝色背景 */
#blue {
    width: 100%;
    height: 7.4vh;
    background-color: RGB(56, 148, 255);
    position: relative;
    display: flex;
    align-items: center;
}

/* 蓝色背景 论坛话题 */
#title {
    position: absolute;
    left: 33vw;
    color: white;
    font-size: 2.5vb;
}

/* 蓝色背景 论坛关注按钮-外面盒子 */
#love {}

/* 蓝色背景 论坛关注按钮 */
#love button {
    position: absolute;
    right: 5vw;
    top: 1.5vh;
    width: 24vw;
    height: 4.5vh;
    color: white;
    font-size: 2vb;
    border-radius: 8vb;
}

/* 白色背景 */
#white {
    width: 100%;
    height: 14vh;
    background-color: white;
    margin-bottom: 0.5vh;
    position: relative;
}

#white #data{
    width: 50vw;
    height: 3.5vh;
    position: absolute;
    left: 33vw;
    top:1vh;
}

#data span{
    font-size: 1.8vb;
}

#data span:nth-child(2),#data span:nth-child(4){
    color: gray;
    margin-right: 2vw;
}

/* 论坛白色背景 热度显示-外面的盒子 */
#white #rank {
    width: 100%;
    height: 4vh;
    position: absolute;
    top: 6vh;
    font-size: 1.8vb;
}

/* 热度显示 */
#rank .ranks {
    width: 29vw;
    height: 3vh;
    float: left;
    border: gray solid 0.1vb;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
}

.ranks:first-child {
    margin-left: 3vw;
}

/* 帖子/活动/干货区 切换栏-外面盒子 */
#option {
    width: 100%;
    height: 3vh;
    position: absolute;
    bottom: 1vh;
    left: 3vw;
    background-color: white;
}

/* 帖子/活动/干货区 切换栏 */
#option .options {
    margin-right: 5vw;
    height: 3.5vh;
    float: left;
    font-size: 2vb;
}

/* 帖子-切换栏 蓝色下划线 */
.options:first-child {
    border-bottom: RGB(65, 153, 255) solid 0.5vb;
}

/* 论坛头像 */
#yellow {
    height: 10.5vh;
    width: 10.5vh;
    background-color: RGB(252, 202, 0);
    float: left;
    position: absolute;
    left: 6vw;
    top: 7.5vh;
}

/* 热门/最新/本校-切换栏 整体*/
#switch {
    width: 100%;
    height: 5vh;
    background-color: white;
    display: flex;
    align-items: center;
    margin-bottom: 0.5vh;
}

/* 热门/最新/本校-切换栏 内部盒子 */
#switch .switches {
    width: 15vw;
    height: 3vh;
    float: left;
    margin-right: 8vw;
    border: gray solid 0.1vb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vb;
}

#switch .switches:first-child {
    margin-left: 2vw;
}

/* 论坛全部帖子 整体*/
#content {
    width: 100%;
    height: 59vh;
    /* 设置屏幕上下滚动 */
    overflow-y: auto;
}

/* 每条帖子样式 整体 */
#content .persons {
    position: relative;
    width: 100%;
    height: 35vh;
    margin-bottom: 0.2vh;
}

/* 每条帖子样式 头像、用户昵称、关注栏 整体 */
.persons_top {
    height: 7vh;
    background-color: white;
    position: relative;
}

/* 每条帖子样式 头像、用户昵称、关注栏 头像称 */
.persons_top .head {
    position: relative;
    top: 0.5vh;
    left: 2vw;
    width: 5.5vh;
    height: 5.5vh;
    border-radius: 6vb;
    background-color: RGB(252, 202, 0)
}

/* 每条帖子样式 头像、用户昵称、关注栏 用户昵称 */
.persons_top .title {
    font-size: 1.8vb;
    font-weight: bold;
    position: absolute;
    left: 16.5vw;
    top: 0.8vh;
}

/* 每条帖子样式 头像、用户昵称、关注栏 关注 */
.persons .attach {
    width: 13vw;
    height: 3vh;
    border-radius: 2vb;
    background-color: orange;
    position: absolute;
    right: 2.5vw;
    /* 垂直居中 */
    top: 0;
    bottom: 0;
    margin: auto;
    /* 子元素文字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5vb;
}

/* 每条帖子样式 头像、用户昵称、关注栏 院校信息 */
.persons_top .location {
    position: absolute;
    left: 16vw;
    bottom: 1.3vh;
    color: gray;
    font-size: 1.6vb;
}

/* 每条帖子样式-内容 整体 */
.persons_content {
    width: 100%;
    height: 23vh;
    /* 高度动态的，随内容文字数量改变*/
    background-color: white;
    font-size: 1.7vb;
    padding-top: 0.5vh;
}

.persons_content p {
    margin-bottom: 0.5vh;
    margin-left: 2vw;
}

.persons_content img {
    width: 47vw;
    margin-left: 2vw;
}

/* 每条帖子样式-底部回复 整体 */
.persons_bottom {
    width: 100%;
    height: 5vh;
    background-color: white;
    display: flex;
    align-items: center;

}

.col {
    position: relative;
}

.col> div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.persons_bottom .col {
    width: 100vw;
    height: 4vh;
    display: flex;
    align-items: center;
    background-color: white;
    position: relative;
}

.persons_bottom .col img {
    width: 5vw;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: -4vw;
}

.persons_bottom .col span{
    font-size: 1.5vb;
    position: absolute;
    top:-1vh;
    left:2vw;
}

/* 底部栏编辑帖子 整体 */
#bottom{
    width: 100%;
    height: 10.5vh;
    background-color: white;
    /* 因为有个小问题：整个界面超出了屏幕范围，就没有用flex布局 */
    position: relative;
    /* 固定在屏幕底部  */
    position: fixed;
    bottom: 0;
}

#bottom #input{
    width: 70vw;
    height: 4.5vh;
    border: blue solid 0.2vb;
    display: flex;
    align-items: center;
    position:absolute;
    left: 3vw;
    top: 1.5vh;
    color: gray;
    font-size: 1.8vb;
    padding-left: 2vw;
}


#bottom img:last-child{
    width: 8vw;
    position: absolute;
    right: 19vw;
    top: 1.8vh;
}
